<template>
	<view class="groupDetails">
		<view class="goods">
			<view class="left">
				<image :src="info.picture" mode="aspectFill"></image>
				<!-- <view class="state">
					已使用
				</view> -->
			</view>
			<view class="right">
				<text class="oneline">{{info.title}}</text>
				<text>{{info.price > 0 ? '¥'+info.price : ''}}{{info.price > 0 && info.integral > 0 ? ' + ' : ''}}{{info.integral > 0 ? info.integral+'积分' : ''}}</text>
				<text v-if="info.market_price > 0">原价：¥{{info.market_price}}</text>
				<view class="ts">{{info.rule_name}}</view>
			</view>
		</view>
		<view class="title">
			团购详情：
		</view>
		<view class="info" v-html="info.intro">
		</view>
		<!-- <image class="info_img" src="http://hdsq.aoorange.cn/attachment/images/2020/03/17/image_158444328250575450.jpg" mode="aspectFill"></image> -->
		<view class="title">
			温馨提示：
		</view>
		<view class="line">
			<text>兑换时间：</text>
			<text>{{info.time_range}}</text>
			<!-- <view class="date">(周末、法定节假日通用）</view> -->
		</view>
		<view class="line">
			<text>有效时间：</text>
			<text>{{info.past_time}}</text>
		</view>
		<view class="line" v-if="info.rule_desction != ''">
			<text>使用规则：</text>
			<text>{{info.rule_desction}}</text>
		</view>
		<view class="bot" @click="exchange()">立即兑换</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="http://hdsq.aoorange.cn/attachment/xcx/icon/close.png" mode="aspectFill"></image>
				<view class="title">支付详情</view>
				<view class="line2" v-if="info.integral > 0">
					<text>应付积分</text>
					<text>{{info.integral}}</text>
				</view>
				<view class="line2" v-if="info.price > 0">
					<text>应付金额</text>
					<text>¥ {{info.price}}</text>
				</view>
				<view class="line2" v-if="info.price > 0">
					<text>在线微信支付</text>
					<image src="http://hdsq.aoorange.cn/attachment/xcx/icon/icon37.png" mode="aspectFill"></image>
				</view>
				<view class="pay_bot" @click="subExchange()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import {Base64} from '../static/base64.min.js';
	export default {
		data() {
			return {
				id : 0,
				merchantId: 0,
				info: {}
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve
					.request({
						url: '/marketing/group-purchase/view',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id: self.id,
							merchantId: self.merchantId,
						}
					})
					.then(res => {
						self.info = res.data;
						self.info.intro = Base64.decode(self.info.intro);
						self.info.intro = self.info.intro.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');					
					});
			},
			exchange() {
				if(uni.getStorageSync('access-token') == '') {
					common.jump('login');
					return ;
				}
				var self = this;
				if(self.info.operateInfo.state == 0) {
					uni.showModal({
						title: '温馨提示',
						content: self.operateInfo.message,
						showCancel: false
					});
					return ;
				}
				if(self.info.price > 0 || self.info.integral > 0) {
					self.$refs.popup.open();
					return ;
				}
				self.subExchange();
			},
			close() {
				this.$refs.popup.close();
			},
			subExchange() {
				var self = this;
				serve
					.request({
						url: '/marketing/group-purchase/exchange',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id:self.info.id,
						}
					})
					.then(res => {
						if(res.code != 200) {
							uni.showToast({
								title:res.message,
								icon: 'none'
							});
							return ;
						}
						if(res.data.is_pay == 1) {
							// self.paySuccess(res.data.id, 'user_money');
							self.wechatPay(res.data.id);
							return ;
						}
						common.jump('success', 'type=group_pay&id='+res.data.id);
						return ;
					});
			},
			wechatPay(operateId) {
				var self = this;
				serve
					.request({
						url: '/order/pay/wechat',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							data_id:operateId,
							data_type : 'group_pay'
						}
					})
					.then(res => {
						if(res.code != 200) {
							uni.showToast({
								title:res.message,
								icon: 'none'
							});
							return ;
						}
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function (res) {
								self.paySuccess(self.info.id, 'wechat');
								return ;
							},
							fail: function (err) {
								uni.showToast({
									title: '放弃支付',
									icon: 'none'
								});
								common.jump('success', 'type=group&id='+operateId);
								// self.paySuccess(self.pay_id, 'wechat');
								return ;
							}
						})
					});
				return ;
			},
			paySuccess(operateId, payType) {
				var self = this;
				serve
					.request({
						url: '/marketing/group-purchase/pay',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id:operateId,
							pay_type: payType
						}
					})
					.then(res => {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
						if(res.code == 200) {
							common.jump('success', 'type=group&id='+operateId);
						} 
						return ;
					});
				return ;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			this.merchantId = options.merchantId || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('group_list', this.merchantId);
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.groupDetails {
		padding-bottom: 186upx;
		.goods {
			box-sizing: border-box;
			padding: 48upx 30upx;
			display: flex;
			border-bottom: 1upx #EBECF0 solid;
			position: relative;

			.left {
				position: relative;
				height: 170upx;

				image {
					width: 170upx;
					height: 170upx;
				}

				.state {
					position: absolute;
					bottom: 0upx;
					color: #FFFFFF;
					font-size: 24upx;
					text-align: center;
					line-height: 40upx;
					width: 170upx;
					height: 40upx;
					background: rgba(255, 188, 0, 0.9);
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				margin-left: 20upx;
				justify-content: space-between;


				text:nth-child(1) {
					font-size: 32upx;
					color: #333333;
					font-weight: bold;
				}

				text:nth-child(2) {
					font-size: 28upx;
					color: #EB5938;
					font-weight: bold;
					margin-top: 65upx;
				}

				text:nth-child(3) {
					color: #CCCCCC;
					font-size: 20upx;
					text-decoration: line-through;
				}
			}

			.ts {
				color: #999999;
				font-size: 24upx;
				position: absolute;
				right: 30upx;
				bottom: 48upx;
			}
		}

		.title {
			font-size: 28upx;
			color: #FFBC00;
			font-weight: bold;
			padding-left: 30upx;
			padding-top: 47upx;
		}
		.info{
			box-sizing: border-box;
			padding: 30upx;
			font-size: 28upx;
			color: #666666;
		}
		.info_img{
			width:690upx;
			height:400upx;
			margin: 0upx 30upx;
		}
		.line{
			box-sizing: border-box;
			padding: 45upx 30upx 0upx;
			font-size: 28upx;
			text:nth-child(1){
				color: #999999;
			}
			text:nth-child(2){
				color: #333333;
			}
			.date{
				color: #333333;
				margin-left: 110upx;
			}
		}

		.bot {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			color: #FFFFFF;
			background-color: #FFBC00;
			font-size: 32upx;
			box-shadow: 0upx 1upx 0upx 0upx rgba(0, 0, 0, 0.1);
		}
		.pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 26upx;
				text:last-child{
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				image{
					width: 40upx;
					height: 40upx;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: rgba(255, 200, 10, 1);
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>
